<template>
  <div class="container">
    <img class="bg1" src="@/assets/login/login-form-left.svg" alt="背景图片" />

    <div class="login-form"
    :model="ruleForm"
    >

      <h2 id="form-title">郑经新闻后台系统</h2>

      <input
        class="login-input"
        type="text"
        name=""
        id="username"
        placeholder="请输入账号"
        v-model="ruleForm.username"
      />

      <input
        class="login-input"
        type="password"
        name=""
        id="password"
        placeholder="请输入密码"
        v-model="ruleForm.password"
      />

      <!-- 角色按钮 -->
      <div class="option-radios">

        <div class="option-radio-item" id="option-radio-student">
          <!-- 学生单选按钮 -->
          <input
            class="role-radio"
            id="student"
            name="radio"
            type="radio"
            value="student"
            checked="checked"
          />
          <label class="radio-text" for="student">学生</label>
        </div>

        <div class="option-radio-item" id="option-radio-teacher">

        <!-- 教师单选按钮 -->
          <input
            class="role-radio"
            id="teacher"
            name="radio"
            type="radio"
            value="teacher"
            @click="changeTeacherRadio"
          />
          <label class="radio-text" for="teacher">教师</label>
        </div>

        <div class="option-radio-item" id="option-radio-admin">
          <input
            class="role-radio"
            id="admin"
            name="radio"
            type="radio"
            value="admin"
            @click="changeAdminRadio"
          />
          <label class="radio-text" for="admin">管理员</label>
        </div>
      </div>

      <div class="option">
        <input
          class="remember-checkbox"
          id="remember-checkbox"
          type="checkbox"
          value="remember"
          @click="onRememberMe"
        />
        <label class="remember-text option-item" for="remember-checkbox">记住我</label>
        <a class="forget option-item" href="#">忘记密码?</a>
        <a class="register option-item" href="#">立即注册</a>
      </div>

      <!-- 登录按钮 -->
      <div>
        <input 
        class="login-button" 
        type="submit" 
        value="登录"
        @click="onClickLogin"
         />
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery" // 引入jquery

// 表单验证使用jquery进行实现
$("document").ready(function () {

  //设置登录按钮不可点击。
  $(".login-button").attr("disabled", true);
  $(".login-button").css("background", "#9db0ff");
  //设置登录按钮的悬浮游标为禁用状态
  $(".login-button").css("cursor", "not-allowed");

  $("#username, #password").bind("input", function () {
    var username = $.trim($("#username").val());
    var password = $.trim($("#password").val());

    if (username !== "" && password !== "") {
      $(".login-button").attr("disabled", false);
      $(".login-button").css("background", "#2f54eb");
      $(".login-button").css("cursor", "pointer");
    } else {
      //设置登录按钮不可点击。
      $(".login-button").attr("disabled", "true");
      $(".login-button").css("background", "#9db0ff");
      //设置登录按钮的悬浮游标为禁用状态
      $(".login-button").css("cursor", "not-allowed");
    }
  });
});

export default {
  // 核心数据
  data() {
    return {
      ruleForm: { // 登录主要信息
        username: '',
        password: '',
        roleValue: '',
        rememberMe: false, // 默认不记住
      }
    }
  },
  updated(){
    console.log(this.ruleForm);
  },
  // 自定义方法
  methods: {
    changeTeacherRadio(){
      alert('test')
      this.ruleForm.roleValue = 'teacher'
    },
    changeAdminRadio(){
      this.ruleForm.roleValue = 'admin'
    },
    // 是否记住我
    onRememberMe(){
      this.ruleForm.rememberMe = !this.ruleForm.rememberMe
      alert(this.ruleForm.rememberMe)
    },
    // 点击登录
    onClickLogin(){
      console.log(JSON.stringify(this.ruleForm));
    }
  }
}

</script>

<style>

* {
  margin: 0px;
  padding: 0px;
}

/* 取消a标签的下划线 */
a {
  text-decoration: none;
  color: black;
}

body {
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  border-radius: 8px;
  /* border: 2px solid #2f54eb; */
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

.bg1 {
  /* border: 2px solid #26272b; */
  width: 450px;
  height: 450px;
}

.login-form {
  /* border: 2px solid red; */
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0px;
}

#form-title {
  color: #2f54eb;
  /* font-size: 20px; */
  margin: 0 0 35px 0;
}

.login-input {
  width: 280px;
  height: 32px;
  font-size: 14px;
  margin: 0 0 20px 0;
  padding: 0 0 0 20px;
  border: 1px solid #2f54eb;
  border-radius: 3px;
  background-color: #f1f3f8;
}

.option-radios {
  position: relative;
  display: flex;
  width: 390px;
  font-size: 14px;
  margin: 0 0 20px 0px;
  /* 用户无法选中文本 */
  user-select: none;
}

.option-radio-item {
  
  width: 100px;
  height: 15px;
  /* background-color: red; */
  /* margin: 0 0 0 0; */
}

#option-radio-student{
  position: relative;
  left: 0px;
}

#option-radio-teacher {
  position: absolute;
  left: 120px;
}

#option-radio-admin {
  width: 130px;
  position: absolute;
  right: 30px;
}

.role-radio {
  width: 15px;
  height: 15px;
}

.radio-text {
  position: absolute;
  line-height: 15px;
  margin: 0 0 0 3px;
}

.radio-text:hover {

  font-weight: 700;
  color: #2f54eb;
}

.option {
  position: relative;
  display: flex;
  width: 300px;
  font-size: 14px;
  margin: 0 0 20px 0;
  /* 用户无法选中文本 */
  user-select: none;
  /* background-color: red; */
}

.remember-checkbox {
  width: 15px;
  height: 15px;
}

.option-item {
  line-height: 15px;
}

.option-item:hover {
  font-weight: 700;
  color: #2f54eb;
}

.remember-text {
  margin: 0 0 0 3px;
}

.forget {
  position: absolute;
  right: 0px;
}

.register {
  position: absolute;
  left: 120px;
}

.login-button {
  width: 300px;
  height: 38px;
  font-size: 14px;
  margin: 0 0 20px 0;
  background-color: #2f54eb;
  /* border: 1px solid #2f54eb; */
  color: #fff;
  border-radius: 3px;
}
</style>